<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>7.样式处理</title>
        <style>
            .title{
                color: pink;
            }
        </style>
    </head>
    <body>
        <div id="root"></div>

    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.js"></script>

    <script type="text/babel">
        //1.class => className
        // const element = <h1 className='title'>hello</h1>

        //2.style => 行内样式
        // 不支持原生dom的行内样式写法
        // const element = <h1 style='color:pink; font-size:30px '>hello</h1>
        

    //3.行内样式必须写成对象形式
    //    const style ={};
    //    const element = <h1 style = {style}>hello</h1>

        //4.
        //style样式命名建议写成小驼峰
        //
        const element =
        <h1>
            /
            style ={{
                color:'pink',
                fontSize:30,
                backgroundColor:'black',
            }}    
            hello react
        </h1>

        //标签只能作为样式属性 不能作为对象形式style{{}}

        ReactDOM.createRoot(document.getElementById("root")).render(element);
    </script>
    </body>
</html>